<!-- 热点追踪组件 -->
<template>
  <div>
    <p class="title">热点追踪 >></p>
    <div class="info">
      <FocusItem id="infoItem" v-for="item in itemList" :key="item.id" :img="item.img"
        :title="item.title" :detail="item.detail" :href="href" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import FocusItem from './focusItem.vue'
export default defineComponent({
  components: {
    FocusItem
  },
  setup () {
    const itemList = ref([
      {
        id: 1,
        href: '',
        img: '',
        title: '万科天空之城 | 让城市竖起来',
        detail: '想象一下这样的生活一栋高楼就是一座竖起来的城市'
      },
      {
        id: 2,
        href: '',
        img: '',
        title: '大壮名城256㎡大平层，想知道的通',
        detail: '一旦住过这样的大平层，再难接受一般的产品。'
      },
      {
        id: 3,
        href: '',
        img: '',
        title: '璇湾壹号艺术板房全球面世',
        detail: '未来在这里，HBC国际都会生活，将得到更具体、更丰富的演绎与体验呈现。'
      }
    ])
    return {
      itemList
    }
  }
})
</script>

<style lang="less" scoped>
.title {
  margin-left: 20px;
  margin-bottom: 10px;
  font-family: 'HarmonyOS Sans SC';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #333333;
}
.info {
  width: 554px;
  padding: 24px 0 24px 24px;
  box-sizing: border-box;
  border: 1px solid #ededed;
  margin-right: 21px;
}
#infoItem:first-child {
  padding-top: 0;
}
#infoItem:last-child {
  border: 0;
  padding-bottom: 0;
}
</style>
